<template>
  <div class="vue-qr-component">
    <vue-qr
      v-if="text"
      :text="text"
      :size="size"
      :bgSrc="bgSrc"
      :colorDark="colorDark"
      :autoColor="autoColor"
      :colorLight="colorLight"
      :margin="8"
      :logoSrc="logoSrc"
      :logoCornerRadius="logoCornerRadius"
      :dotScale="dotScale"
      :callback="dataUrl"
    ></vue-qr>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  name: 'VueQrComponent',
  props: {
    text: {
      type: String, // 二维码的内容
      required: true
    },
    size: {
      type: Number, // 二维码的大小 宽高一致
      default: 120
    },
    dotScale: {
      // 二维码显示点的大小 值在 0-1 之间
      type: Number,
      default: 1
    },
    colorDark: {
      // 二维码点阵的颜色
      type: String,
      default: '#000'
    },
    colorLight: {
      // 三个大点周围的颜色 推荐设置为 #fff 白色
      type: String,
      default: '#fff'
    },
    autoColor: {
      type: Boolean, // 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true
      default: false // 若设置了 autoColor 为 true ，则 colorDark 和 colorLight 都将被忽略。
    },
    bgSrc: { // 欲嵌入的背景图地址
      type: String
    },
    logoSrc: { // 嵌入至二维码中心的 LOGO 地址
      type: String
    },
    logoCornerRadius: { // 标识及其边框的圆角半径, 默认为0
      type: Number,
      default: 0
    }
  },
  components: {
    'vue-qr': VueQr
  },
  methods: {
    dataUrl(url) {
      this.$emit('dataUrl', url)
    }
  }
}
</script>
